<template>
    <div class="student-list-container">
        <el-form label-width="auto" style="max-width: 600px">
            <el-form-item label="用户名：">
                <el-input v-model="listParams.userName" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleSearch">查询</el-button>
                <el-button type="primary" @click="handleAdd">添加</el-button>
            </el-form-item>
        </el-form>
        <div class="student-list-table">
            <el-table :data="tableData" border style="width: 100%" :header-cell-style="{ 'text-align': 'center' }"
                :cell-style="{ 'text-align': 'center' }" v-loading="loading">
                <el-table-column prop="id" label="Id" />
                <el-table-column prop="userName" label="用户名" />
                <el-table-column prop="realName" label="真实姓名" />
                <el-table-column label="学级">
                    <template #default="scope">
                        <span v-for="level in level.list" :key="level.value">
                            <span v-if="scope.row.userLevel === level.value">{{ level.name }}</span>
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="性别" width="60">
                    <template #default="scope">
                        <span v-if="scope.row.sex === 1">男</span>
                        <span v-else-if="scope.row.sex === 2">女</span>
                    </template>
                </el-table-column>
                <el-table-column prop="phone" label="手机号" />
                <el-table-column prop="createTime" label="创建时间" width="160" />
                <el-table-column label="状态" width="70">
                    <template #default="scope">
                        <el-tag v-if="scope.row.status == 1" type="success">启用</el-tag>
                        <el-tag v-else-if="scope.row.status == 2" type="danger">禁用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="270">
                    <template #default="scope">
                        <el-button size="small" @click="handleStatus(scope.row.id)">禁用</el-button>
                        <el-button size="small" @click="handleEdit(scope.row.id)">编辑</el-button>
                        <el-button size="small" @click="handleLog(scope.row.id)">日志</el-button>
                        <el-button size="small" type="danger" @click="handleDel(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="student-list-page">
            <el-pagination v-model:current-page="listParams.pageIndex" v-model:page-size="listParams.pageSize"
                :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
    </div>
</template>
<script setup lang="ts">
import { userDelete, userPageList, userStatus, type UserPageListParamsType, type UserPageListResListType } from '@/api/user'
import { useLevelStore } from '@/store/level'
import { ElMessage, ElMessageBox } from 'element-plus'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const loading = ref(false)
const listParams = ref<UserPageListParamsType>({
    userName: '',
    role: 1,
    pageIndex: 1,
    pageSize: 10
})
const handleSizeChange = (val: number) => {
    listParams.value.pageSize = val
    // console.log(listParams.value.pageSize);
    getList()
}
const handleCurrentChange = (val: number) => {
    listParams.value.pageIndex = val
    // console.log(listParams.value.pageIndex);
    getList()
}
const tableData = ref<UserPageListResListType[]>([])
const total = ref(0)

function getList() {
    userPageList(listParams.value).then(res => {
        // console.log(res.response);
        if (res.code === 1) {
            loading.value = true
            tableData.value = res.response?.list as UserPageListResListType[]
            total.value = res.response?.total as number
        }
    }).finally(() => {
        loading.value = false
    })
}

onMounted(() => {
    getList()
})

const level = useLevelStore()
// console.log(level.list);

function handleAdd() {
    router.push('/student/edit')
}
function handleSearch() {
    getList()
}

function handleEdit(id: number) {
    router.push('/student/edit?id=' + id)
}
function handleLog(id: number) {
    router.push
}

function handleDel(id: number) {
    ElMessageBox.confirm(
        '确认要删除?',
        '删除',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        userDelete(id).then(res => {
            if (res.code === 1) {
                ElMessage({
                    type: 'success',
                    message: '删除成功',
                    duration: 1000,
                    onClose() {
                        getList()
                    }
                })
            }
        })
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '取消删除',
            duration: 1500
        })
    })
}
function handleStatus(id: number) {
    userStatus(id).then(res => {
        console.log(res.response);
        getList()
    })
}
</script>
<style lang="scss" scoped>
.el-form {
    display: flex;

    .el-form-item {
        margin-right: 32px;
    }
}

.student-list-page {
    margin-top: 30px;
}
</style>